<template>
  <div>
    <content-header-wrapper />
    <a-card style="margin: 10px 0 0 0;background: #fff;">
      <h2>{{ $route.meta.title }}</h2>
      <a-layout style="background: #fff;padding:3rem">
        <a-layout-content>
          <a-form
            id="formAppend"
            class="user-layout-login"
            ref="formAppend"
            :form="form"
            @submit="submit"
          >
            <a-form-model-item label="标题">
              <a-input
                class="input"
                placeholder="输入标题"
                v-decorator="[
                  'noteTile', // 给表单赋值或拉取表单时，该input对应的key
                  // @blur 是当元素失去焦点时所触发的事件
                  {
                    rules: [{ required: true, message: '请输入标题' }],
                    validateTrigger: 'blur',
                  },
                ]"
              />
            </a-form-model-item>
            <a-form-model-item label="内容">
              <a-input
                class="input"
                placeholder="输入内容"
                type="textarea"
                v-decorator="[
                  'noteDetail', // 给表单赋值或拉取表单时，该input对应的key
                  // @blur 是当元素失去焦点时所触发的事件
                  {
                    rules: [{ required: true, message: '请输入内容' }],
                    validateTrigger: 'blur',
                  },
                ]"
                :auto-size="{ minRows: 10, maxRows: 16 }"
              />
            </a-form-model-item>
            <a-form-model-item label="发布人">
              <a-input
                class="input"
                v-decorator="[
                  'pubilshMan', // 给表单赋值或拉取表单时，该input对应的key
                  // @blur 是当元素失去焦点时所触发的事件
                  {
                    rules: [{ required: true, message: '请输入发布人' }],
                    validateTrigger: 'blur',
                  },
                ]"
                placeholder="输入发布人"
              />
            </a-form-model-item>
          </a-form>
        </a-layout-content>
        <a-layout-footer style="background: #fff;">
          <div style="float: right; margin-right: 10rem">
            <a-button type="danger" @click="clear"> 清空 </a-button>
          </div>
          <div style="float: right; margin-right: 1rem">
            <a-button
              type="primary"
              @click="submit"
              :loading="submintStatus"
              :disabled="submintStatus"
            >
              提交
            </a-button>
          </div>
        </a-layout-footer>
      </a-layout>
    </a-card>
  </div>
</template>

<script>
import request from "@/utils/request";
import ContentHeaderWrapper from '../../components/ContentHeaderWrapper/ContentHeaderWrapper.vue';
const noteUrl = {
  append: "/note/append",
};
export default {
  components: { ContentHeaderWrapper },
  name: "PublishNotice",
  data() {
    return {
      form: this.$form.createForm(this), // 只有这样注册后，才能通过表单拉取数据
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      submintStatus: false,
    };
  },
  methods: {
    submit() {
      const {
        form: { validateFields },
      } = this;
      this.submintStatus = true;
      const validateFieldsKey = ["noteTile", "noteDetail", "pubilshMan"];
      validateFields(validateFieldsKey, { force: true }, (err, values) => {
        if (!err) {
          const appendParams = {
            noticeTitle: values.noteTile,
            noticeDetail: values.noteDetail,
            noticePublisher: values.pubilshMan,
          };
          console.log(appendParams);
          request({
            url: noteUrl.append,
            method: "post",
            data: appendParams,
            type: "json",
          }).then((data) => {
            this.clear();
            this.$notification.open({
              message: "创建完成",
              icon: <a-icon type="smile" style="color: #108ee9" />,
            });
          });
        } else {
          setTimeout(() => {
            this.submintStatus = false;
          }, 600);
        }
      });
    },
    clear() {
      //简单粗暴的刷新页面
      this.form.resetFields(); //重置表单
      this.submintStatus = false;
    },
  },
};
</script>

